<template>
    <div class="shoplivingdetail">
        <div class="banner">
            <img :src="data.building_site_info.building_site_image" alt="" class="banner_img">
            <div class="banner_info">
                <p class="banner_name">{{data.building_site_info.customer_name}}</p>
                <p class="banner_address">{{ data.building_site_info.region_name }} {{ data.building_site_info.community_name }} {{ data.building_site_info.acreage }}</p>
            </div>
            <div class="banner_head">
                <img :src="data.building_site_info.customer_avatar" alt="">
            </div>
        </div>
        <div class="manage">
            <p class="manage_caption">施工进度</p>
            <div class="manage_icons">
                <div class="manage_icon manage_icon1" :class="{active: data.building_site_info.stage >= 1, working: data.building_site_info.stage === 1}"></div>
                <div class="manage_icon_line"></div>
                <div class="manage_icon manage_icon2" :class="{active: data.building_site_info.stage >= 2, working: data.building_site_info.stage === 2}"></div>
                <div class="manage_icon_line"></div>
                <div class="manage_icon manage_icon3" :class="{active: data.building_site_info.stage >= 3, working: data.building_site_info.stage === 3}"></div>
                <div class="manage_icon_line"></div>
                <div class="manage_icon manage_icon4" :class="{active: data.building_site_info.stage >= 4, working: data.building_site_info.stage === 4}"></div>
                <div class="manage_icon_line"></div>
                <div class="manage_icon manage_icon5" :class="{active: data.building_site_info.stage >= 5, working: data.building_site_info.stage === 5}"></div>
            </div>
            <div class="manage_titles">
                <div class="manage_title" v-for="item in data.progress_config" :key="item.id">{{ item.progress_name }}</div>
            </div>
        </div>
        <div class="team">
            <p class="team_caption">项目团队</p>
            <div class="team_list">
                <div class="team_item" v-for="(item, index) in data.team_list" :key="index">
                    <img :src="item.member_picture" alt="" class="team_head">
                    <p class="team_name ellipsis_line_com">{{item.member_name}}</p>
                    <p class="team_job ellipsis_line_com">{{item.member_role_name}}</p>
                </div>
            </div>
        </div>
        <div class="living">
            <p class="living_caption">{{ this.$util.shieldReview() ? '装修直播' : '' }}</p>
            <div class="living_list">
                <div class="living_item" v-for="(item, index) in data.log_data.list" :key="index">
                    <div class="living_time">
                        <p class="living_date">{{item.log_date}}<span> {{item.log_month}}</span></p>
                        <p class="living_noon">{{item.log_time_interval}}</p>
                    </div>
                    <div class="living_info">
                        <p class="living_title">{{item.log_title}}</p>
                        <p class="living_content">{{item.log_record}}</p>
                        <img :src="item.log_image" alt="" class="living_img">
                        <p class="living_manager">{{item.log_author_role_name}} {{item.log_author_name}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getDecorationLiveDet } from '@/api/shop'
export default {
	name: 'ShopLivingDetail',
	data() {
		return {
			house: {},
			data: {
				building_site_info: {},
				log_data: {},
				progress_config: [],
				team_list: {}
			}
		}
	},
	onLoad(option) {
		let id = option.build_id
		if (this.$util.shieldReview()) {
			uni.setNavigationBarTitle({
      			title: '直播详情'
			})
		}
		this.getDetail(id)
	},
	methods: {
		getDetail(id) {
			let params = {
				buildingsite_id: id
			}
			getDecorationLiveDet(params).then(res => {
				if (res.status === 'success') {
					let data = res.data
					for (let i in data.progress_config) {
						if (data.progress_config[i].progress_name == data.building_site_info.progress_name) {
							data.building_site_info.stage = i + 1
						} else {
							data.building_site_info.stage = 1
						}
					}
					this.data = data
				}
			})
		}
	}
}
</script>
<style scoped lang="scss">
	.shoplivingdetail {
		background-color: #f5f5f5;
		/*==*/
		.banner {
			position: relative;
			width: 100%;
			height: 615px;
			.banner_img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.banner_info {
				position: absolute;
				right: 190px;
				bottom:26px;
				text-align: right;
				.banner_name {
					margin-bottom: 10px;
					font-size: 34px;
					color: #fff;
				}
				.banner_address {
					font-size:24px;
					color: #fff;
				}
			}

			.banner_head {
				position: absolute;
				right: 20px;
				bottom: -20px;
				width: 152px;
				height: 152px;
				background-color: lightblue;
				border: 6upx solid #fff;
				box-sizing: border-box;
				outline:1upx solid #ddd;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		/*==*/
		.manage {
			padding: 50px 40px;
			background-color: #fff;
			box-sizing: border-box;

			.manage_caption {
				font-size: 30px;
				color: #333;
				font-weight: bold;
			}
			.manage_icons {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: auto;
				margin-top: 40px;
				width: 95%;
				height: 60px;
				.manage_icon {
					position: relative;
					width:60px;
					height:60px;
					background: center center / 100% 100% no-repeat;
					&.working::after {
						content: "施工中";
						display: block;
						position: absolute;
						top: -20px;
						right: -48px;
						width:80px;
						height: 30px;
						font-size: 24px;
						color: #fff;
						line-height: 30px;
						text-align: center;
						background: linear-gradient(to right, #ff1c31, #f424de);
						border-radius: 16px;
						border-bottom-left-radius: 0;
					}
				}

				.manage_icon1 {
					background-image: url($imgUrl +'shop/icon_manage1.png');
					&.active {
						background-image: url($imgUrl +'shop/icon_manage1_active.png');
					}
				}

				.manage_icon2 {
					background-image: url($imgUrl +'shop/icon_manage2.png');
					&.active {
						background-image: url($imgUrl +'shop/icon_manage2_active.png');
					}
				}
				.manage_icon3 {
					background-image: url($imgUrl +'shop/icon_manage3.png');
					.active {
						background-image: url($imgUrl +'shop/icon_manage3_active.png');
					}
				}
				.manage_icon4 {
					background-image: url($imgUrl +'shop/icon_manage4.png');
					&.active {
						background-image: url($imgUrl +'shop/icon_manage4_active.png');
					}
				}
				.manage_icon5 {
					background-image: url($imgUrl +'shop/icon_manage5.png');
					&.active {
						background-image: url($imgUrl +'shop/icon_manage5_active.png');
					}
				}

				.manage_icon_line {
					width: 100px;
					height: 2upx;
					background-color: #ddd;
				}

			}

			.manage_titles {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: auto;
				margin-top: 30px;
				width: 100%;
				height: 32px;
				 .manage_title {
					height: 32px;
					width: 160px;
					line-height:32px;
					font-size:24px;
					text-align: center;
					color: #666;
				}
			}
		}
		/*==*/
		.team {
			margin-top: 20px;
			padding: 30px;
			background-color: #fff;
			box-sizing: border-box;
			.team_caption {
				font-size: 30px;
				color: #333;
				font-weight: bold;
			}
			.team_list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: auto;
				margin-top: 20px;
				width: 90%;
				font-size: 0;
				.team_item {
					width: 100px;
					text-align: center;
					.team_head {
						margin-bottom: 26px;
						width: 100px;
						height: 100px;
						border-radius: 50%;
					}
					.team_name {
						margin-bottom: 13px;
						font-size: 18px;
						color: #333;
					}
					.team_job {
						font-size: 18px;
						color: #999;
					}
				}

			}
		}
		/*==*/
		.living {
			margin-top: 20px;
			padding: 4%;
			background-color: #fff;
			box-sizing: border-box;
			.living_caption {
				margin-bottom: 20px;
				font-size: 30px;
				line-height: 40px;
				color: #333;
				font-weight: bold;
			}
			.living_item {
				padding-bottom:50px;
				font-size: 0;
				.living_time {
					display: inline-block;
					width: 20%;
					vertical-align: top;

					.living_date {
						font-size: 35px;
						color: #333;
						font-weight: bold;
						line-height: 50px;
						span {
							margin-left: 10px;
							font-size: 24px;
						}
					}
					.living_noon {
						color: #666;
						font-size: 24px;
					}
				}

			}

			.living_info {
				display: inline-block;
				width:70%;
				vertical-align: top;
				.living_title {
					margin-bottom: 20px;
					font-size: 28px;
					color: #333;
					font-weight: bold;
				}
				.living_content {
					margin-bottom: 20px;
					font-size: 26px;
					color: #333;
					line-height: 50px;
				}
				.living_img {
					margin-bottom: 20px;
					max-width: 100%;
				}
				.living_manager {
					font-size: 24px;
					color: #999;
				}

			}
		}
	}

</style>
